<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    let vm = {
        template: `
                    <div>
                        <input type="text" v-model="name">
                        {{name}}
                    </div>
                    <div>
                        <input type="text" v-model="nickName">
                        {{nickName}}
                    </div>
                `,
        setup () {
            const { ref, reactive, watch, toRefs, watchEffect } = Vue
            let obj = reactive({ name: 'GalaxySa', nickName: 'Foogy' })
            let { name, nickName } = toRefs(obj)
            // 第一个参数：数组，需要监听的数据
            // 第二个参数，前面是新值后面是旧值
            // watch(
            //     [() => obj.name, () => obj.nickName],
            //     ([newName, newNickName], [oldName, oldNickName]) => {
            //         console.log(newName, oldName);
            //         console.log(newNickName, oldNickName);
            //         //immediate 立即监听
            //         // 常在页面刷新后做一些数据的操作，不需要用户通过行为触发，如请求等
            //     }, { immediate: true })

            //watchEffect也是侦听器，watch的衍生
            // 1.立刻执行的侦听器
            // 2.不需要像watch，传递监听数据。自动监听所有的响应式数据
            watchEffect(() => {
                console.log(obj.name);
                setTimeout(() => {
                    // 监听数据的操作在3s后失效
                    stop()
                }, 3000)
            })
            return { name, nickName }
        }
    }
    let app = Vue.createApp(vm)
    app.mount('#app')
</script>

</html>